<!--
 * @Date: 2023-09-15 13:21:43
 * @LastEditors: bb_c_e_f 18434367522@163.com
 * @LastEditTime: 2023-09-15 16:16:44
 * @FilePath: \part-cloud-appd:\project\company\veteran-cadre-app\src\components\app-nav.vue
-->
<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  showBackIcon: {
    type: Boolean,
    default: true,
  },
  bgColor: {
    type: String,
    default: 'black',
  },
  color: {
    type: String,
    default: 'white',
  },
})
const navHeight = uni.getSystemInfoSync().statusBarHeight || 0
</script>

<template>
  <uni-nav-bar
    :height="`${44 + navHeight}px`"
    left-icon="left"
    fixed
    :background-color="bgColor"
    :border="false"
    :shadow="false"
    class="z-99"
  >
    <template v-if="props.showBackIcon" #left>
      <view :style="{ paddingTop: `${navHeight}px` }" @click="router.back()">
        <uni-icons type="left" size="20" :color="props.color" />
      </view>
    </template>
    <text
      class="nav-text text-hide block truncate text-black"
      :style="{ paddingTop: `${navHeight}px`, color: props.color }"
    >
      {{ props.title }}
    </text>
  </uni-nav-bar>
  <view
    :style="{ height: `${44 + navHeight}px` }"
    class="bg-transparent w-full"
  />
</template>
